<template>
    <div class="liveAdd">
        <h2 class="tit">健康讲堂点播新增</h2>
        <!-- 点播 -->
        <div class = 'main'>
            <p class="title">基本信息</p>
            <Row class="box" :gutter="32">
                <Col span="16">
                    <!-- 标题 -->
                    <div class="live">
                        <span class="i hongdian"> <i style="color:red;">*</i> 课堂标题：</span>
                        <Input v-model="live.title" placeholder="输入标题25个汉字以内" clearable maxlength='25' />
                    </div>
                </Col>
                <Col span="8">
                    <!-- 课堂类型 -->
                    <div class="live">
                        <span class="i"><i style="color:red;">*</i> 课堂类型：</span>
                        <Select v-model="live.modalDataVal" style="width:150px;text-align:left;">
                            <Option v-for="item in liveType" :value="item.id" :key="item.id">{{ item.columnName }}</Option>
                        </Select>
                    </div>
                </Col>
                <Col span="8">
                    <!-- 播放来源 -->
                    <div class="live">
                        <span class="i">播放来源：</span>
                        <Select v-model="live.videoSource" style="width:150px;text-align:left;">
                            <Option
                                v-for="item in videoList"
                                :value="item.id"
                                :key="item.id"
                                style='text-align:center;'
                            >{{ item.name }}</Option>
                        </Select>
                    </div>
                    <!-- 上传的视频 -->
                    <div v-if="live.videoSource==2">
                        <div class="live">
                            <span class="i">上传视频：</span>
                            <bigUploadFile :src="live.filePath" @getUrl="getUploadUrl">
                            </bigUploadFile>
                        </div>  
                        <small style="color:#ff9966;margin:0 0 15px 70px">&nbsp;&nbsp;（如需更改视频需再次上传文件即可覆盖）</small>                      
                    </div>
                    <!-- 文件路径 -->
                    <div class="live" v-else>
                        <span class="i">网站地址：</span>
                        <Input
                            v-model="live.playbackAddress"
                            placeholder="请输入网站地址"
                            clearable
                        />
                    </div>
                    <!-- 推广力度 -->
                    <div class="live">
                        <span class="i">推广力度：</span>
                        <!-- <InputNumber
                            :max="100000000"
                            :min="1"
                            v-model="live.fictitiousNum"
                            style="width:150px"
                        ></InputNumber> -->
                        <!-- /@keydown="fictitiousInputwo" -->
                        <input min="0" max="9999" v-model="live.fictitiousNum" type="text"  @input="fictitioussrInput" class="inputnumber" />
                    </div>
                </Col>
                <Col span="8">
                    <!-- 原始价格 -->
                    <div class="live">
                        <span class="i"><i style="color:red;">*</i>原始价格：</span>
                        <!-- <InputNumber
                            :max="999999"
                            :min="0"
                            v-model="live.originPrice"
                            style="width:150px"
                            @on-change='computedMaxPrice'
                            @on-blur="oldPriceChange(live.originPrice, 1)"
                        ></InputNumber>   -->
                        <input min="0" max="9999" @on-change="computedMaxPrice" @on-blur="oldPriceChange(live.originPrice, 1)" v-model="live.originPrice" type="number" @input="srInput" class="inputnumber" />
                        <small style="color:#ff9966">（备注：请先输入原始价格再选择折后价格。）</small>                     
                    </div>                     
                    <Col span="24">
                        <!-- 首页图片 -->
                        <div class="live">
                            <span class="i"><i style="color:red;">*</i>封面图：</span>
                            <div class="input">
                                <div class="demo-upload-list" v-for="(item,index) in uploadList" :key="index">
                                    <div v-if="item.status === 'finished'">
                                        <img :src="item.url">
                                        <div class="demo-upload-list-cover">
                                            <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
                                            <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                                        </div>
                                    </div>
                                    <div v-else>
                                        <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                                    </div>
                                </div>
                                <Upload
                                    v-show="uploadList.length ==0"
                                    ref="upload"
                                    :show-upload-list="false"
                                    :default-file-list="defaultList"
                                    :on-success="handleSuccess"
                                    :format="['jpg','jpeg','png']"
                                    :max-size="1024"
                                    :on-format-error="handleFormatError"
                                    :on-exceeded-size="handleMaxSize"
                                    :before-upload="handleBeforeUpload"
                                    multiple
                                    type="drag"
                                    :action="uploadUrl"
                                    :headers="fromData"
                                    :data="uploadData"
                                    style="display: inline-block;width:58px;"
                                >
                                    <div style="width: 58px;height:58px;line-height: 58px;">
                                        <Icon type="ios-camera" size="20"></Icon>
                                    </div>
                                </Upload>
                                <Modal title="预览图片" v-model="visible" footer-hide>
                                    <img :src=" uploadList[0].url " v-if="visible" style="width: 100%">
                                </Modal>
                            </div>
                        </div>
                    </Col>                     
                    <Col span="24">
                        <div style="margin:-10px 0 20px 0">
                            <small style="color:#ff9966">（备注：图片大小不超过1024KB，建议750*300px）</small>
                        </div>
                    </Col>
                </Col>
                <Col span="8">
                <!-- 折后价格 -->
                    <div class="live">
                        <span class="i">
                            <!-- <i style="color:red;">*</i> -->
                            折后价格：
                        </span>
                        <!-- <InputNumber
                            :max="oldMoney"
                            :min="0"
                            v-model="live.discountPrice"
                            style="width:150px"
                            @on-blur="oldPriceChange(live.discountPrice, 2)"
                        ></InputNumber> -->
                        <!-- @keydown="disInputwo" -->
                        <input min="0" max="9999" @on-blur="oldPriceChange(live.discountPrice, 2)" v-model="live.discountPrice" type="number"  @input="dissrInput" class="inputnumber" />
                        <small style="color:#ff9966">（备注：折后价格需要小于原始价格。）</small>
                    </div>                    
                    <div class="live">
                        <span class="i"><i style="color:red;">*</i>列表图：</span>                       
                            <div class="input">
                                <div class="demo-upload-list" v-for="items in tabulatList">
                                    <div v-if="items.status === 'finished'">
                                        <img :src="items.url">
                                        <div class="demo-upload-list-cover">
                                            <Icon
                                                type="ios-eye-outline"
                                                @click.native="handleViewlist(items.name)"
                                            ></Icon>
                                            <Icon
                                                type="ios-trash-outline"
                                                @click.native="handleRemovelist(items)"
                                            ></Icon>
                                        </div>
                                    </div>
                                    <div v-else>
                                        <Progress
                                            v-if="items.showProgress"
                                            :percent="items.percentage"
                                            hide-info
                                        ></Progress>
                                    </div>
                                </div>
                                <Upload
                                    v-show="tabulatList.length ==0"
                                    ref="listupload"
                                    :show-upload-list="false"
                                    :default-file-list="tabdefaultList"
                                    :on-success="handleSuccesslist"
                                    :format="['jpg','jpeg','png']"
                                    :max-size="1024"
                                    :on-format-error="handleFormatErrorlist"
                                    :on-exceeded-size="handleMaxSizelist"
                                    :before-upload="handleBeforeUploadlist"
                                    multiple
                                    type="drag"
                                    :action="uploadUrl"
                                    :headers="fromData"
                                    :data="uploadData"
                                    style="display: inline-block;width:58px;vertical-align: middle;"
                                >
                                    <div style="width: 58px;height:58px;line-height: 58px;">
                                        <Icon type="ios-camera" size="20"></Icon>
                                    </div>
                                </Upload>
                                <Modal title="预览图片" v-model="visiblelist" footer-hide>
                                    <img :src=" tabulatList[0].url " v-if="visiblelist" style="width: 100%">
                                </Modal>
                            </div>
                            <RadioGroup v-model="live.pageStyle" size="large" style="margin-left:25px">
                                <Radio :label="1">方图</Radio>
                                <Radio :label="2">长图</Radio>
                            </RadioGroup>
                    </div> 
                    <div style="margin:-10px 0 20px 0">
                        <small style="color:#ff9966">（备注：图片大小不超过1024KB，建议方图170*170px,长图660*180px）</small>
                    </div>
                </Col>
            </Row>
        </div>
        <div class = 'main'>
            <p class="title"><i style="color:red;">*</i>主讲人信息</p>
            <Row class="box" :gutter="32">
                <Col span="8">
                    <!-- 主讲人 -->
                    <div class="live">
                        <span class="i">
                            <b style="color:red;"></b>主讲人姓名：
                        </span>
                        <Input v-model="live.doctorName" placeholder="请输入主讲人姓名" readonly clearable maxlength='30' />
                    </div>
                    <!-- 所属机构 -->
                    <div class="live">
                        <span class="i">所属机构：</span>
                        <Input v-model="live.doctorHospital" placeholder="请输入机构名称" readonly clearable maxlength='30' />
                    </div>
                </Col>
                <Col span="8">
                    <!-- 职业职称 -->
                    <div class="live">
                        <span class="i">职业职称：</span>
                        <Input v-model="live.doctorTitle" placeholder="请输入职称" readonly clearable maxlength='30' />
                    </div>
                    <!-- 所属科室 -->
                    <div class="live">
                        <span class="i">所属科室：</span>
                        <Input v-model="live.deptType" placeholder="请输入科室名称" readonly clearable maxlength='30' />
                    </div>
                </Col>
                <Col span="8">
                    <!-- 添加主讲人 -->
                    <div class="live">
                        <Button type="primary" @click="InputSearch">
                            <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>选择主讲人信息
                        </Button>
                    </div>
                    <div>
                        <small style="color:#ff9966">（备注：可选择平台医生，将会带出医生详细信息。）</small>
                    </div>
                </Col>
                <Col span="23">
                    <!-- 个人简介 -->
                    <div class="live">
                        <span class="i">个人简介：</span>
                        <Input v-model="live.introduction" placeholder="请输入医生简介信息。" readonly clearable maxlength="500" show-word-limit type="textarea" style='margin:0;width:99%; ' />
                    </div>
                </Col>
            </Row>
        </div>
        <Modal
            v-model="modal1"
            title="请选择主讲人"
            width="1000" 
            :styles="{top: '80px'}"
            footer-hide>
            <div>
                <Row>
                    <Col span="24">
                    <fourLevelLinkage
                        @changeProvince="changeProvince"
                        @changeCity="changeCity"
                        @changeArea="changeArea"
                        @changeHospital="changeHospital"
                        :province="province"
                        :city="city"
                        :area="area"
                        :hospital="hospital"
                    ></fourLevelLinkage>
                        <Input
                            v-model.trim="live.search"
                            placeholder="搜索主播医生"
                            style="width: 200px"
                        />
                        <Button type="primary" icon="ios-search" @click='searchdoctor'></Button>
                    </Col>
                </Row>
                <Row
                    type="flex"
                    justify="space-around"
                    class="code-row-bg"
                    style="margin-top:20px;"
                >
                    <Col span="24">
                        <Table stripe :columns="columns" :data="data1"></Table>
                        <Page
                            :total="count"
                            size="small"
                            :current="pageNo"
                            :page-size="pageSize"
                            @on-change="loading"
                            style='margin-top:10px;text-align:center;'
                        />
                    </Col>
                </Row>
            </div>
        </Modal>
        <div class = 'main'>
            <p class="title">课堂介绍</p>
            <!-- 课堂介绍 -->
            <div class="live">
                <!-- :class='{limitWord:limitWord==true}' -->
                <div class="shuru" >
                    <vueEditor
                        id="editor_id"
                        :textHtml="live.introduce"
                        :urlCode="urlCode"
                        @valueHandle="afterChange"
                        :height='300'
                        style="width:100%;"
                    ></vueEditor>
                </div>
            </div>
        </div>
        <!-- 保存 -->
        <div style="margin:20px 0;width: 100%;text-align:center">
            <Button type="primary" @click="saveLive" :disabled='disabledSave' class="btn">
                <Icon type="ios-checkmark" style="margin-right: 5px" />保存
            </Button>
            <Button @click="backLive" class="btn">
                <i class = "iconfont icon-butongyi" style="margin-right:5px"></i>取消
            </Button>
        </div>
    </div>
</template>

<script>
import api from "@/api/commonApi";
import code from "@/configs/base.js";
import vueEditor from "@/components/vueEditor";
import bigUploadFile from "@/components/bigUploadFile";
import fourLevelLinkage from "@/components/fourLevelLinkage";
export default {
    components:{
        vueEditor,
        bigUploadFile,
        fourLevelLinkage
    },
    data() {
        return {
            province: null,
            city: null,
            area: null,
            hospital: null,

            doctorhospitaid:"",
            doctorId:"",
            doctorName:"",
            doctorhospitaName:"",
            // 新增直播/点播
            status: "",
            tabList: [
                {
                    title: "直播",
                    value: 1
                },
                {
                    title: "点播",
                    value: 2
                }
            ],
            // 上传图片相关
            defaultList: [],
            visible: false,
            uploadList: [],
            uploadModal: true,
            urlCode: '{"urlCode":"' + code.urlCode.richText + '"}',
            uploadData: { json: '{"urlCode":"' + code.urlCode.onDemand + '"}' },
            activeUploadId: "5c2bf345-b973-4ffd-a52e-87bb9c1d2b72",
            uploadUrl: api.fileAll,
            images: "",
            // 点播
            live: {
                // 课堂介绍
                introduce:"",
                // 输入值
                search: "",
                // 主讲人名字
                doctorName: "",
                //职业职称
                doctorTitle: "",
                //所属机构
                doctorHospital: "",
                //所属科室
                deptType: "",
                //个人简介
                introduction: "",
                // 主讲人ID
                doctorId: "",
                // 点播标题
                title: "",
                // 原始价格
                originPrice: null,
                // 折后价格
                discountPrice: null,
                //图片形状
                pageStyle: 1,
                // 推广力度
                fictitiousNum: null,
                // 播放地址/上传的视频
                playbackAddress: "",
                // 文件路径
                filePath: "",
                // 播放来源
                videoSource: 1,
                // 课堂类型
                modalDataVal: ""
            },
            // 医院ID
            hospitalId:"",
            // 课堂类型
            liveType: [],
            // 视频上传方式
            videoList: [
                {
                    id: 1,
                    name: "网站地址"
                },
                {
                    id: 2,
                    name: "本地上传"
                }
            ],
            src:"",
            videoStyle: { width: "400px", height: "300px" },
            // 弹出层
            modal1: false,
            // 医生权限管理相关
            // 添加医生权限管理数据
            data1: [],
            // 页码
            pageNo: 1,
            // 页数
            pageSize: 10,
            // 添加医生总数
            count:10,
            // 医生表头数据
            columns: [
                {
                    title: "排序",
                    key: "sum",
                    align: "center",
                    render: (h, params) => {
                        let sum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", sum);
                    }
                },
                {
                    title: "姓名",
                    key: "doctorName",
                    align: "center"
                },
                {
                    title: "所在医院",
                    key: "hospitalName",
                    align: "center"
                },
                {
                    title: "科室",
                    key: "deptName",
                    align: "center"
                },
                {
                    title: "职称",
                    key: "titleName",
                    align: "center"
                },
                {
                    title: "设置",
                    key: "operate",
                    align: "center",
                    // width: 60,
                    render: (h, params) => {
                        let row = params.row
                        return h(
                            "a",
                            {
                                attrs: {
                                    href: "javascript:void(0);"
                                },
                                on: {
                                    click: () => {
                                        this.live.doctorName = row.doctorName;
                                        this.live.doctorId = row.doctorId;
                                        this.hospitalId = row.hospitalId;
                                        this.live.doctorHospital = row.hospitalName;
                                        this.live.doctorTitle = row.titleName;
                                        this.live.deptType = row.deptName;
                                        this.live.introduction = row.personalIntroduction;
                                        this.modal1 = false
                                    }
                                }
                            },
                            "添加"
                        );
                    }
                }
            ],
            // 折后价格最大限制
            oldMoney:0,
            disabledSave: false,
            limitWord: false,
            tabulatList: [],
            tabdefaultList: [],
            listimages: "",
            visiblelist: false,
        };
    },
    created(){  
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/publicOperation/liveMant/list",
                title: "医师讲堂"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted() {
        this.status = this.$route.query.status;
        this.uploadList = this.$refs.upload.fileList;
        this.tabulatList = this.$refs.listupload.fileList;
        // 加载栏目
        this.modalData();
    },
    methods: {
        changeProvince(val) {
            this.province = val;
        },
        changeCity(val) {
            this.city = val;
        },
        changeArea(val) {
            this.area = val;
        },
        changeHospital(val) {
            this.hospital = val;
        },
        afterChange(val) {
            this.live.introduce = val;
            // var num = this.removeHTMLTag(this.live.introduce);
			// if (num.length > 3) {
            //     this.limitWord = true
			// 	this.$Message.error("课堂介绍已超出上限30字符，请修改后重新输入");
            //     return
			// }
        },
        srInput(e) {
            this.live.originPrice = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
            if(e.target.value>9999.99)this.live.originPrice=9999.99 
        },
        Inputwo(e) {
            this.live.originPrice = e.target.value.match(/^\d*(\.?\d{0,1})/g)[0] || null;
        },
        dissrInput(e) {
            this.live.discountPrice = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
            if(e.target.value>9999.99)this.live.discountPrice=9999.99
        },
        disInputwo(e) {
            this.live.discountPrice = e.target.value.match(/^\d*(\.?\d{0,1})/g)[0] || null;
        },
        fictitioussrInput(e) {
            this.live.fictitiousNum=this.live.fictitiousNum.replace(/[^0-9]/g, '')
            if(e.target.value>9999)this.live.fictitiousNum=9999
        },
        fictitiousInputwo(e) {
            this.live.fictitiousNum = e.target.value.match(/^\d*(\.?\d{0,1})/g)[0] || null;
        },
        oldPriceChange(val, type){
            if(val){
                val = "'"+val+"'"
                val = val.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符
                val = val.replace(/^\./g,""); //验证第一个字符是数字
                val = val.replace(/\.{2,}/g,"."); //只保留第一个, 清除多余的
                val = val.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
                val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入两个小数
                if(val.indexOf(".") >0 && val.indexOf("0")>2){
                    val = parseFloat(val)
                }
                if(val.indexOf(".") >0 && val.lastIndexOf("0")>2){
                    val = parseFloat(val)
                }
                if(val.indexOf(".") <=0 && val!=""){
                    val = parseFloat(val)
                }
            }
            if(type == 1){
                this.live.originPrice = val;
            }else if(type == 2){
                this.live.discountPrice = val
            }
            return val;
        },
        // 折后价格不得大于原始价格
        computedMaxPrice (val) {
            this.oldMoney = val
        },
        // 查询主讲人
        InputSearch() {
            this.modal1 = true;
            this.province = ''
            this.city = ''
            this.area = ''
            this.hospital = ''
            this.pageNo = 1
            this.getdoctor()
        },
        searchdoctor() {
            this.pageNo = 1
            this.getdoctor()
        },
        getdoctor() {
            this.$axios
                .post(api.doctorAuthlist, {
                    searchKey: this.live.search,
                    pageNo: this.pageNo,
                    pageSize: this.pageSize,
                    provinceCode: this.province,
                    cityCode: this.city,
                    areaCode: this.area,
                    hospitalId: this.hospital,
                })
                .then(resp => {
                    if (resp.data.success) {
                        let ret = resp.data.object.records;
                        if(ret){
                            ret.forEach((item,index)=>{
                                item.sum = this.addZeros(index);
                            })
                            this.data1 = ret
                            this.count = resp.data.object.total;
                        } else {
                            this.data1 = []
                        }                       
                    } else {
                        this.$Message.error("不允许访问");
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        loading (index)  {
            this.pageNo = index;
            this.getdoctor()
        },
        // 直播新增保存
        saveLive() {
            var num = this.removeHTMLTag(this.live.introduce);
			if (num.length > 1000) {
				this.$Message.error("课堂介绍已超出上限，请修改后重新输入");
                return
			}
            this.disabledSave = true
            if (!this.images) {
                this.$Message.error("请上传点播封面");
                this.disabledSave = false
                return "";
            }
            if (!this.listimages) { 
                this.disabledSave = false
                return this.$Message.error("请上传点播列表图")
            }
            if(!this.live.title){
                this.$Message.error("请填写课堂标题");
                this.disabledSave = false
                return "";
            }
            if(!this.live.modalDataVal){
                this.$Message.error("请填写课堂类型");
                this.disabledSave = false
                return;
            }
            // 折后价格与原始价格
            if (
                Number(this.live.originPrice) <
                    Number(this.live.discountPrice)
            ) {
                this.$Message.error("折后价格应小于原始价格");
                this.disabledSave = false
                return "";
            } else if(!Boolean(this.live.originPrice) ||
                !Boolean(this.live.discountPrice)) {
                    this.$Message.error("请检查原始价格与折后价格是否填写完整");
                this.disabledSave = false
                return "";
            } else if (this.live.doctorId=='' || this.live.doctorName=='') {
                this.$Message.error("请选择主讲人");
                this.disabledSave = false
                return "";
            } else if (this.live.doctorHospital=='') {
                this.$Message.error("请选择主讲人所属机构");
                this.disabledSave = false
                return "";
            } else if (this.live.doctorTitle=='') {
                this.$Message.error("请输入主讲人职称");
                this.disabledSave = false
                return "";
            }
            let params = {
                // 医生姓名及ID
                doctorName: this.live.doctorName,
                doctorId: this.live.doctorId, 
                //所属机构
                doctorHospital: this.live.doctorHospital,
                hospitalId: this.hospitalId,
                hospitalName: this.live.doctorHospital,
                //职业职称
                doctorTitle: this.live.doctorTitle,
                //所属科室
                doctorDept: this.live.deptType,
                //个人简介
                doctorIntroduce: this.live.introduction,
                // 点播标题
                title: this.live.title,
                // 原始价格与折后价格
                originalPrice: this.live.originPrice,
                discountPrice: this.live.discountPrice,
                // 推广力度
                fictitiousNum:this.live.fictitiousNum,
                // 文件路径
                filePath: this.live.filePath,
                // 播放地址
                playbackAddress: this.live.playbackAddress,
                // 课堂类型
                columnId: this.live.modalDataVal,
                columnName: this.live.modalDataVal,
                // 标题图片
                headImg: this.images,
                listImg: this.listimages,
                // 播放来源
                videoSource:this.live.videoSource,
                //图片形状
                pageStyle:this.live.pageStyle,
                // 课堂介绍
                classIntroduction:this.live.introduce,
                icharge: 1,
                ilive : 0,
            };
            this.liveType.forEach( i => {
                if(this.live.modalDataVal == i.id){
                    params.columnName = i.columnName
                }
            })
            this.$axios.post(api.insertLecture, params).then(res => {
                if (res.data.success) {
                    let ret = res.data.object;
                    this.$Message.info("添加成功");
                    let query = this.$route.query;
                    setTimeout(()=>{
                        this.disabledSave = false
                        this.functionJS.queryNavgationTo(
                            this,
                            "/index/publicOperation/liveMant/list",
                            // query
                        );
                    },1000)
                } else {
                    this.$Message.error("添加失败请重试");
                    this.disabledSave = false
                }
            });           
        },
        // 后退
        backLive() {
            let query = this.$route.query;
            this.functionJS.queryNavgationTo(
                this,
                "/index/publicOperation/liveMant/list",
                query
            );
        },
        // 获取课堂类型
        modalData() {
            this.$axios.post(api.findLectureColumnList,{}).then(resp => {
                if (resp.data.success) {
                    let ret = resp.data.object;
                    this.liveType = ret;
                } else {
                    this.$Message.error("请求失败,请稍候重试");
                }
            });
        },
        // 标题图片上传
        handleView(name) {
            this.imgName = name;
            this.visible = true;
        },
        //获取上传的url
        getUploadUrl(url){
            console.log("传递过来的url",url);
            this.src = url;
            this.live.filePath = url
        },
        handleRemove(file) {
            const fileList = this.$refs.upload.fileList;
            this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
            this.images = fileList[0];
        },
        handleSuccess(res, file) {
            res = this.uploadFileDecrypt(res);
            file.url = this.fileBaseUrl + res.object[0].fileName;
            this.images = JSON.stringify(res.object[0]);
            file.name = res.object[0].fileName;
        },
        handleFormatError(file) {
            this.$Notice.warning({
                title: "上传失败",
                desc: "文件格式错误"
            });
        },
        handleMaxSize(file) {
            this.$Notice.warning({
                title: "文件过大",
                desc: `文件${file.name}过大，文件最大限制为1024KB`
            });
        },
        handleBeforeUpload(file) {
            console.log(file)
            const check = this.uploadList.length < 1;
            if (!check) {
                this.$Message.info("只能上传一张图片");
            }
            return check;
        },
        handleViewlist(name) {
            this.imgName = name;
            this.visiblelist = true;
        },
        handleRemovelist(file) {
            const fileList = this.$refs.listupload.fileList;
            this.$refs.listupload.fileList.splice(fileList.indexOf(file), 1);
            if(this.listimages){
                this.listimages = ''
            }
        },
        handleSuccesslist(res, file) {
            res = this.uploadFileDecrypt(res);
            file.url = this.fileBaseUrl + res.object[0].fileName;
            this.listimages = JSON.stringify(res.object[0]);
            file.name = res.object[0].fileName;
        },
        handleFormatErrorlist(file) {
            this.$Notice.warning({
                title: "格式错误",
                desc: "文件 " + file.name + " 上传失败,请重试"
            });
        },
        handleMaxSizelist(file) {
            this.$Notice.warning({
                title: "文件过大",
                desc: "文件"+ file.name +"过大，文件最大限制为1024KB"
            });
        },
        handleBeforeUploadlist(file) {
            const check = this.tabulatList.length < 1;
            if (!check) {
                this.$Message.info("只能上传一张图片");
            }
            return check;
        }
    }
};
</script>

<style lang="less" scoped>
.shuru {
    width:100%;
    margin: 5px 60px;
    div {
        margin: 0;
    }
}
.limitWord {
    pointer-events: none;
}
.demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin-right: 4px;
}
.demo-upload-list img {
    width: 100%;
    height: 100%;
}
.demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
    display: block;
}
.demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
}
.liveAdd {
    width: calc(100%);
    padding: 10px 0px;
    margin: 0 auto;
    background: #fff;
    .live {
        width: 100%;
        display: flex;
        margin: 10px 0;
        text-align: left;
        span {
            display: inline-block;
            min-width: 85px;
        }
        p{
            margin-left:20px;
        }
    }
    .tit {
        margin:10px 0;
        font-weight:bold;
        text-align:center;
    }
    .main{
        width: 97%;
        display: flex;
        flex-direction: column;
        margin: 10px auto;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        margin-bottom: 20px;
        padding-bottom: 20px;
        .title {
            font-size: 20px;
            padding-left: 15px;
            margin-bottom: 20px;
            color: #333;
            height: 40px;
            line-height: 40px;
            background: #ebedf8;         
        }
        .box{
            padding: 0 30px;
        }
        .hongdian {
            margin-left: -10px;
        }
        .inputnumber {
            width: 150px;
            height: 30px;
            background: #fff;
            border: none;
            outline: none;
            text-indent: 10px;
            line-height: 30px;
            border: 1px solid #ddd;
            border-radius: 4px;
            color: #666;
        }
        .inputnumber:focus{
            border-color:#5362e1
        }
    }
    .btn {
        width: 75px;
        height: 35px;
    }
    .icon-butongyi {
        font-size: 14px;
    }
}
.page{
    text-align: center;
    margin: 20px 0;
}
</style>
